<template>
  <div>
    <p style="text-align: center; margin: 20px 0 20px">让机器人让在选中群中发消息</p>
    <div style="text-align: center">
      <el-transfer
        v-model="selected"
        :data="data"
        style="text-align: left; display: inline-block"
        filterable
        :titles="['所有群聊', '发送到']"
        :button-texts="['删除', '添加']"
        @change="handleChange"
      >
        <span slot-scope="{ option }" style="width: 200px">{{ option.label }} - {{ option.key }}</span>
      </el-transfer>
    </div>
  </div>
</template>

<script>
import { groupList } from '@/api/bot'
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      data: [], // 选择项
      selected: []
    }
  },
  created() {
    groupList().then(res => {
      for (const i of res) {
        this.data.push({
          key: i.id,
          label: i.name
        })
      }
    }).catch(_err => {})
  },
  methods: {
    handleChange(_value, _direction, _movedKeys) {
      // if (direction === 'left') return
      this.$emit('selected', this.selected)
    }
  }
}
</script>

<style scoped>

</style>
